<template>
  <div
    id="app"
    class="app-box"
    style="width:100%;height:100%;"
    v-if="hackReset"
  >
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "app",
  data () {
    return {
      hackReset: true,
      show: true

    };
  },
  //created 阶段
  created () {
    localStorage.setItem('initLogin', true)
    // console.log("process.env.NODE_ENV-->", process.env.NODE_ENV);
  },
  mounted () {
    // 检测浏览器路由改变页面不刷新问题,hash模式的工作原理是hashchange事件
    window.addEventListener(
      "hashchange",
      () => {
        let currentPath = window.location.hash.slice(1);
		console.log(currentPath)
        if (this.$route.path !== currentPath) {
          this.$router.push(currentPath);
        }
      },
      false
    );


    window.addEventListener("visibilitychange", () => { //这个方法是监测浏览器窗口发生变化的时候执行
	
      let aa = localStorage.getItem('currentUserinfo');
      // console.log(localStorage.getItem('currentUserinfo'), localStorage.getItem('userinfo'), aa !== localStorage.getItem('userinfo'))

      if (document.hidden == false && aa !== localStorage.getItem('userinfo')) {
        this.show = !this.show;
        let userinfo = JSON.parse(localStorage.getItem('userinfo'));
        localStorage.setItem('currentUserinfo', localStorage.getItem('userinfo'))
        this.$router.push({
          path: userinfo.permisstions[0].path
        })
      }
    });


  },
  methods: {
    refresh () {
      //现将app.vue下面的 头部组件，菜单组件，内容组件隐藏再放出来，实现刷新一样的效果
      this.hackReset = false
      this.$nextTick(() => {
        this.hackReset = true
      })
    }
  },
  watch: {
    'show': function (newVal) {
      this.refresh();
    }
  }
};
</script>


<style scoped>
	.el-table th.gutter{
	  display: table-cell!important;
	}
</style>
